<template>
	<view class="container">
		<block v-if="showCon">

			<st-search-bar class="search" disabled :placeholder="uniHotSearchDefault" @directExec="jumpSearch"></st-search-bar>	
			<!-- 首页顶部栏 -->

			<view class="global-banner-menu-block">
				<view class="global-banner-menu-wrap">
					
					<view class="global-banner" v-if="bannerList.length">
						<swiper class="swiper" duration="300" autoplay="true" interval="5000" circular="true" @change="bannerChange">
							<block v-for="(item,index) in bannerList" :key="index">
								<swiper-item>
									<image @click="toAds(item)" :src="item.adsrc" mode="aspectFill"></image>
								</swiper-item>
							</block>
						</swiper>
						<view class="swiper-dots">
							<view class="dot" :class="{'active': bannerCurrent == index}" v-for="(item,index) in bannerList" :key="index"></view>
						</view>
					</view>
					<!-- 轮播图 -->
					
					<view class="menu-swiper-box" v-if="navList.length">
						<swiper class="menu-swiper" @change="menuChange" :style="{height: menu_swiper + 'rpx'}">
							<swiper-item class="menu-info clearfix" v-for="(item,index) in navList" :key="index">
								<block v-for="(item1,index1) in item" :key="index1">
									<view class="list-url" @click="toNavPage(item1)">
										<image class="item-pic" :src="item1.m_ico"></image>
										<view class="item-text">{{item1.m_title}}</view>
									</view>
								</block>
							</swiper-item>
						</swiper>
						
						<view class="menu-dots" v-if="navList.length>1">
							<view class="dot" :class="{'active': menuCurrent == index}" v-for="(item,index) in navList" :key="index"></view>
						</view>
						
					</view>
					<!-- 导航 -->
				
				</view>
			</view>
			<!-- 轮播图、导航 -->
	
			<view class="module-banner" v-if="navAdsList.length">
				<view class="left-item">
					<image class="big-img" v-if="navAdsList[0]" @click="toAds(navAdsList[0])" :src="navAdsList[0].adsrc" mode="aspectFill"></image>
				</view>
				<view class="right-item">
					<image class="sma-img" v-if="navAdsList[1]" @click="toAds(navAdsList[1])" :src="navAdsList[1].adsrc" mode="aspectFill"></image>
					<image class="sma-img last-sma" v-if="navAdsList[2]" @click="toAds(navAdsList[2])" :src="navAdsList[2].adsrc" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 广告位 -->

			<view class="global-module-block module-destination" v-if="destinations.length">
				<view class="module-title-bar">
					<text class="title">目的地推荐</text>
					<view class="more">
						<st-check-more :msg="'查看更多'" :borderTop="false" @more="toDestIndex"></st-check-more>
					</view>
				</view>
				<view class="destination-module-group">
					<block v-for="(item, index) in destinations" :key="index">
						<view v-if="index < 9" @click="toDestDetail(item.id)" class="destination-item">
							<image class="img" :src="item.litpic" mode="aspectFill" v-if="index<3"></image>
							<view class="text" v-if="index<3">{{item.kindname}}</view>
							<view class="label" v-else>{{item.kindname}}</view>
						</view>
					</block>
				</view>
			</view>
			<!-- 推荐目的地 -->
			
			<view class="global-module-block module-strategy" v-if="raiders.length">
				<view class="module-title-bar">
					<text class="title">热门攻略</text>
					<view class="more">
						<st-check-more :msg="'查看更多'" :borderTop="false" @more="toRaiderIndex"></st-check-more>
					</view>
				</view>
				<view class="strategy-module-group">
					<view class="strategy-module-wrap">
						<view class="strategy-left">
							<view @click="toRaiderDetail(raiders[0].id)" v-if="raiders[0]" class="strategy-big">
								<image class="pic" :src="raiders[0].litpic" mode="aspectFill"></image>
								<view class="title">{{raiders[0].title}}</view>
							</view>
						</view>
						<view class="strategy-right">
							<view @click="toRaiderDetail(raiders[1].id)" v-if="raiders[1]" class="strategy-sma">
								<image class="pic" :src="raiders[1].litpic" mode="aspectFill"></image>
								<view class="title">{{raiders[1].title}}</view>
							</view>
							<view @click="toRaiderDetail(raiders[2].id)" v-if="raiders[2]" class="strategy-sma last-sma">
								<image class="pic" :src="raiders[2].litpic" mode="aspectFill"></image>
								<view class="title">{{raiders[2].title}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 热门攻略 -->
	
			<view  class="global-module-block module-notes" v-if="notes.length">
				<view class="module-title-bar">
					<text class="title">推荐游记</text>
					<view class="more">
						<st-check-more :msg="'查看更多'" :borderTop="false" @more="toNotesIndex"></st-check-more>
					</view>
				</view>
				<view class="notes-module-group">
					<view class="notes-module-wrap">
						<view @click="toNotesDetail(item.id)" v-for="(item,index) in notes" :key="index" class="notes-item">
							<image class="pic" :src="item.litpic" mode="aspectFill"></image>
							<view class="info">
								<image class="header" :src="item.memberpic" mode="aspectFill"></image>
								<view class="title">{{item.title}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐游记 -->

			<view class="module-product">
				<view class="module-product-bar" :style="{top: topHeight + 'px'}">
					<v-tabs
					id="moduleProductTab" 
					class="module-product-tab" 
					v-model="tabCurrent" 
					:scroll="true" 
					:field="'attrname'" 
					:activeColor="activeColor" 
					:lineColor="lineColor" 
					:tabs="tabGroup" 
					shape="arc" 
					:lineScale="0.6" 
					@change="clickTab" v-if="tabGroup.length">
					</v-tabs>					
				</view>
				
				<block v-for="(item,index) in tabGroup" :key="index">
					<view id="moduleProductGroup">
						<block v-if="index == tabCurrent">
							<view class="view-tab-group" id="moduleProductGroup">
								<view v-for="(item1,index1) in item.list" :key="index1" @click="toDetail(item1)" class="view-tab-item">
									<image class="hd" :src="item1.litpic" mode="aspectFill"></image>
									<view class="bd">
										<view class="title">{{item1.title}}</view>
										<view class="info">
											<view v-if="item1.price > 0" class="price"><text class="jg">{{globalExchangeRate}}<text class="num">{{item1.price}}</text></text>起</view>
											<view v-else class="price"><text class="jg"><text class="num">电询</text></text></view>
											<view class="myd">销量{{item1.sellnum}}</view>
										</view>
									</view>
								</view>
							</view>
							<st-check-more :borderTop="false" :msg="'查看更多'" @more="toProductList(item.typeid)" ></st-check-more>
						</block>
					</view>
				</block>
				
			</view>
			<!-- 热门产品 -->
			
			<st-footer-filing></st-footer-filing>
			<!-- 底部备案信息 -->
			
			<st-customize-footer></st-customize-footer>
			<!-- 自定义tabBar -->

			<st-marketing-pendant></st-marketing-pendant>
			<!-- 营销挂件 -->
			
			<st-screen-advertising></st-screen-advertising>
			 <!-- 营销推荐 -->	
			
		</block>
		
	</view>
</template>

<script>
	import vTabs from "@/components/v-tabs/v-tabs.vue"
	import stCheckMore from '@/components/st-check-more.vue'
	import stCustomizeFooter from "@/components/st-customize-footer.vue"
	// #ifdef H5
	// 微信快速登录
	import { wxLogin } from '@/utils/login_wx_client.js'
	// #endif
	import { getProDetailPage,getProIndexPage,getProListPage } from "@/utils/toPath.js"
	import { adsPath,adsClientNo } from '@/utils/ads.js'
	import global_config from "@/config.js"
	import { check_app_install,check_model_open } from '@/utils/utils.js'
	export default {
		components: {
			stCheckMore,
			vTabs,
			stCustomizeFooter
		},
		props: {
			scrolltop: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				topHeight: 0,// 自定义头部总高度
				bannerCurrent: 0,
				bannerList: [],
				menuCurrent: 0,
				menu_swiper: 320,
				navList: [],
				navAdsList: [], // 导航下方广告位
				tabCurrent: 0,
				tabGroup: [],
				activeColor: "#2dbb55",
				lineColor: "#2dbb55",
				moduleTop: 0,
				notes: [], // 游记列表
				raiders: [], // 攻略列表
				destinations: [], // 热门目的地
				products: [], // 热门产品
				requestNum: 5,
				uniHotSearchDefault: '', //全局热搜词
				showCon: false ,// 是否显示页面
				sHeight: 1,
				cfg_satisfy:0,
				exchange_rate:'',
			}
		},
		created() {
			// #ifndef MP-TOUTIAO
			// 自定义头部总高度
			let {stickyHeight} = getApp().globalData;
			this.topHeight = stickyHeight;
			// #endif
			
			this.exchange_rate=uni.getStorageSync('exchange_rate')
			this.cfg_satisfy=uni.getStorageSync('cfg_satisfy')
			this.setPage();
		},
		methods: {
			
			// 首页页面请求
			setPage() {

				this.showCon = true;

				// banner
				this.getBanner(); 

				// 首页导航
				this.getIndexNav();

				// 导航下方广告位
				this.getNavAd();

				// 获取热门目的地
				this.getDestination();
				
				// 首页热门产品导航	
				this.getHotProductNav();

				// 攻略
				if (this.checkAppInstall('system_article') && check_model_open(4)) {
					this.requestNum++;
					this.getRaiders();
				}
				
				// 游记
				if (this.checkAppInstall('system_notes') && check_model_open(101)) {
					this.requestNum++;
					this.getNotes();
				}
				
				// 全局热搜词
				this.uniHotSearchDefault = uni.getStorageSync('uniHotSearchDefault');
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0
				});
			},
			
			// 全局搜索
			jumpSearch() {
				uni.navigateTo({
					url: './search'
				})
			},
			

			// banner
			async getBanner() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_basis_banner'
					}
				res = await this.$http(params);
				if (res.status) {
					this.bannerList = res.data;
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			//切换广告
			bannerChange(e){
				this.bannerCurrent = e.detail.current
			},
			
			// 前往广告位的页面
			toAds(item) {
				adsPath(item.adtype, item.typeid, item.proid, item.adlink, item.adname);
			},
			
			// 首页导航
			async getIndexNav() {
				let client_no = adsClientNo();
				let params = {
					method: 'api/v2/index/index_nav',
					client_no: client_no
				};
				let res = await this.$http(params);
				if (res.status) {
					// 导航初始化
					this.navdots = res.data.list.length > 10 ? true : false;
					
					this.menu_swiper = res.data.list.length < 6 ? 160 : 320;
					let index = 0;
					let newArray = [];
					while (index < res.data.list.length) {
						newArray.push(res.data.list.slice(index, index += 10));
					}
					this.navList = newArray;
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 切换导航
			menuChange(e){
				this.menuCurrent = e.detail.current
			},
			
			// 前往导航所在页面
			toNavPage(item) {
				adsPath(item.type, item.m_typeid, item.product_id, item.m_url, item.m_title,item.is_nested);
			},
			
			// 导航下方广告位
			async getNavAd() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_nav_bottom'
					}
				res = await this.$http(params);
				if (res.status) {
					this.navAdsList = res.data;
				}
				// 请求完成事件
				this.requestEnd();
			},
				
			// 获取热门目的地
			async getDestination() {
				let params = {
					method: 'api/v2/destination/get_hot',
					type_id: 12,
					develop:true
				};
				let res = await this.$http(params);
				if (res.status) {
					this.destinations = res.data;
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 前往目的地首页
			toDestIndex() {
				uni.navigateTo({
					url: '/subPackages/destination/index'
				})
			},
			
			// 前往目的地详情
			toDestDetail(id) {
				uni.navigateTo({
					url: `/subPackages/destination/detail?destId=${id}`
				})
			},
			
			// 获取热门攻略
			async getRaiders() {
				let params = {
					method: 'api/v2/index/hot_raiders',
					row: 3
				};
				let res = await this.$http(params);
				if (res.status) {
					this.raiders = res.data.list;
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 前往攻略首页
			toRaiderIndex() {
				uni.navigateTo({
					url: '/subPackages/strategy/index'
				})
			},
			
			// 前往游记详情
			toRaiderDetail(id) {
				uni.navigateTo({
					url: `/subPackages/strategy/detail?id=${id}`
				})
			},
			
			// 获取热门游记
			async getNotes() {
				let params = {
					method: 'api/v2/index/hot_notes',
					row: 3
				};
				let res = await this.$http(params);
				if (res.status) {
					this.notes = res.data.list;
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 前往游记首页
			toNotesIndex() {
				uni.navigateTo({
					url: '/subPackages/note/index'
				})
			},
			
			// 前往游记详情
			toNotesDetail(id) {
				uni.navigateTo({
					url: `/subPackages/note/detail?id=${id}`
				})
			},
			
			// 获取热门产品导航
			async getHotProductNav() {
				let openProduct = global_config.openProduct;
				let openTypeIds = openProduct.join(',');
				if (!openTypeIds) {
					return false;
				}
				let params = {
					method: 'api/v2/index/hot_product_nav',
					row: 99,
					open_type_ids: openTypeIds
				};
				let res = await this.$http(params);
				this.tabGroup = [];
				if (res.status) {
					this.products = res.data;
					this.products.map(item => {
						// #ifdef MP-TOUTIAO
						// 酒店（2）、景点（5）、团购（13）、组合产品（23）、美食（121）
						if(item.m_typeid == 2 || item.m_typeid == 5 || item.m_typeid == 13 || item.m_typeid == 23 || item.m_typeid == 121){
							let tab = {
								id: item.id,
								attrname: item.m_title,
								typeid: item.m_typeid,
								list: ''
							};
							this.tabGroup.push(tab);
						}
						// #endif
						// #ifndef MP-TOUTIAO
						let tab = {
							id: item.id,
							attrname: item.m_title,
							typeid: item.m_typeid,
							list: ''
						};
						this.tabGroup.push(tab);
						// #endif
					})

					this.tabGroup.map((item, index) => {
						this.clickTab(index)
					})

				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 请求完成事件
			requestEnd() {
				this.requestNum--;
				if (this.requestNum < 1) {
					// 设置导航
					setTimeout(() => {
						let query = uni.createSelectorQuery().in(this);
						query.select('#moduleProductGroup').boundingClientRect(res => {
							if(res && res.top){
								this.moduleTop = res.top + this.scrolltop - 45 - this.topHeight;
							}
						}).exec()
					}, 1000)
				}
			},
			
			// 前往产品列表
			toProductList(typeid) {
				let path = getProListPage(typeid);
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},
			
			// 前往产品详情页面
			toDetail(item) {
				let path = getProDetailPage(item.typeid, {
						id: item.id
					})
				
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},
			
			// 切换产品类型
			async clickTab(e) {
				let tabGroup = this.tabGroup;
				if (!tabGroup[e].list) {
					let typeid = tabGroup[e].typeid;
					let params = {
						method: 'api/v2/index/hot_product',
						row: 10,
						typeid: typeid
					};
					let res = await this.$http(params);
					if (res.status) {
						this.tabGroup[e].list = res.data;
					} else {
						this.tabGroup[e].list = [];
					}
				}else {
					uni.pageScrollTo({
						duration: 150,
						scrollTop: this.moduleTop
					})
				}
			},
					
			// 检查app是否安装
			checkAppInstall(appname) {
				return check_app_install(appname);
			},
			
		}
	};
</script>

<style lang="scss" >
	.container{
		background-color: $uni-bg-color;
	}

	// 搜索
	.global-header-bar {
		display: -webkit-box;
		display: -moz-box;
		padding: 18rpx 24rpx;
		background-color: $uni-bg-color;

		.select {
			color: $uni-text-color-primary;
			height: 64rpx;
			line-height: 64rpx;
			font-size: $uni-font-size-base;
			margin-right: 20rpx;
			.icon {
				vertical-align: middle;
				margin: -2rpx 0 0 6rpx;
			}
		}

		.search {
			color: #888;
			flex: 1 1 auto;
			height: 64rpx;
			line-height: 64rpx;
			padding: 0 20rpx;
			border-radius: 80rpx;
			font-size: 26rpx;
			background-color: #f6f6f6;

			.icon {
				color: #7a7a7a;
				margin-right: 16rpx;
				font-size: $uni-font-size-lg;
			}
		}
	}

	.global-banner-menu-block{
		padding: 0 24rpx;
		.global-banner-menu-wrap{
			border-radius:20rpx;
			box-shadow: 0 8rpx 20rpx 0 #ecf3ee;
		}
	}

	// 轮播图
	.global-banner {
		position: relative;
		.swiper {
			height: 280rpx;
			border-radius: 20rpx;
			overflow: hidden;
			image {
				display: block;
				width: 100%;
				height: 280rpx;
			}
		}
		.swiper-dots{
			position: absolute;
			right: 44rpx;
			bottom: 20rpx;
			z-index: 1;
			@extend .alignItems;
			justify-content: flex-end;
			.dot{
				width: 16rpx;
				height: 16rpx;
				border-radius: 8rpx;
				margin-left: 12rpx;
				background-color: rgba(255,255,255,0.5);
				&.active{
					background-color: rgba(255,255,255,1);
				}
			}
		}
		
	}

	// 主导航 
	.menu-swiper-box{
		position: relative;
		padding-bottom: 32rpx;
		.menu-swiper {
			height: 320rpx;
			box-sizing: content-box;
			.menu-info {
				width: 100%;
				text-align: center;
				.list-url {
					float: left;
					width: 20%;
					height: 128rpx;
					margin-top: 32rpx;
					text-align: center;
					.item-pic {
						display: block;
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto
					}
					.item-text {
						margin-top: 14rpx;
						font-size: 24rpx;
						height: 34rpx;
						line-height: 34rpx;
					}
				}
			}
		}
		.menu-dots{
			height: 28rpx;
			@extend .alignJustify;
			align-items: flex-end;
			.dot{
				width: 8rpx;
				height: 8rpx;
				border-radius: 4rpx;
				margin-right: 6rpx;
				background-color: #ccc;
				&.active{
					width: 28rpx;
					background-color: $uni-bg-color-primary;
				}
			}
		}
	}
	
	// 广告位
	.module-banner {
		@extend .displayflex;
		padding: 0 24rpx;
		margin-top: 28rpx;
		.left-item{
			flex: 1;
			width: 340rpx;
			height: 238rpx;
			.big-img{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.right-item{
			width: 342rpx;
			height: 238rpx;
			margin-left: 18rpx;
			@extend .directionColumn;
			.sma-img{
				display: block;
				flex: 1;
				width: 100%;
				height: 110rpx;
				border-radius: 10rpx;
				&.last-sma{
					margin-top: 18rpx;
				}
			}
		}
	}

	// 公共样式
	.global-module-block{
		margin-top: 48rpx;
		.module-title-bar{
			// @extend .justifyspacec;
			padding: 0 24rpx;
			position: relative;
			.title{
				font-size: 34rpx;
				font-weight: 700;
				color: #222;
			}
			.more{
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	
	// 目的地推荐
	.destination-module-group{
		padding: 32rpx 24rpx 0;
	
		.destination-item {
			display: inline-block;
			vertical-align: top;
			width: 222rpx;
			margin: 0 18rpx 20rpx 0;
			box-sizing: border-box;
			position: relative;
			&:nth-of-type(3n){
				margin-right: 0;
			}
			.label {
				display: block;
				padding: 0 10rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				font-size: $uni-font-size-base;
				background-color: #f9f9f9;
				border-radius:10rpx;
				@extend .ellipse
			}
			.img{
				display: block;
				width: 222rpx;
				height: 222rpx;
				border-radius: 10rpx;
			}
			.text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				text-align: center;
				font-size: $uni-font-size-lg;
				font-weight: bold;
				color: #fff;
				text-shadow: 0 0 3rpx #f6f6f6;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
	
	// 热门攻略
	.strategy-module-group {
		padding: 0 24rpx;
		margin-top: 32rpx;
		.strategy-module-wrap{
			@extend .displayflex;
			height: 342rpx;
			border-radius: 10rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
			.title{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 0 12rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #f6f6f6;
				font-size: $uni-font-size-base;
				background: linear-gradient(360deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
				border-radius: 0 0 0 10rpx;
				@extend .ellipse
			}
			.strategy-left{
				flex: 1;
				width: 342rpx;
				height: 342rpx;
				.strategy-big{
					width: 100%;
					height: 100%;
					border-radius: 10rpx 0 0 10rpx;
					position: relative;
				}
			}
			.strategy-right{
				width: 342rpx;
				height: 342rpx;
				margin-left: 18rpx;
				@extend .directionColumn;
				border-radius: 0 10rpx 10rpx 0;
				overflow: hidden;
				.strategy-sma{
					display: block;
					flex: 1;
					width: 100%;
					height: 162rpx;
					position: relative;
					&.last-sma{
						margin-top: 18rpx;
					}
				}
			}
		}
	}
	
	// 推荐游记
	.notes-module-group{
		padding: 0 24rpx;
		margin-top: 32rpx;
		.notes-module-wrap{
			@extend .justifyspacec;
			border-radius: 10rpx;
			overflow: hidden;
			.notes-item {
				flex: 1;
				width: 222rpx;
				height: 222rpx;
				margin-right: 18rpx;
				position: relative;
				&:last-child {
					margin-right: 0;
				}
				.pic {
					width: 100%;
					height: 100%;
				}
				.info {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
					padding: 0 10rpx;
					height: 64rpx;
					background: linear-gradient(360deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);					
					.header{
						position: absolute;
						left: 10rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 28rpx;
						height: 28rpx;
						border-radius: $uni-border-radius-circle;
					}
					.title {
						padding-left: 34rpx;
						@extend .ellipse;
						font-size: $uni-font-size-sm;
						color: #fff;
						line-height: 64rpx;
					}
				}
			}
		}
	}

	// 栏目切换
	.module-product {
		margin-top: 40rpx;
		.module-product-bar {
			position: -webkit-sticky;
			position: sticky;
			left: 0;
			/* #ifdef H5 */
			top: 88rpx;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			right: 0;
			z-index: 11;
			height: 90rpx;
			background: $uni-bg-color;
			.module-product-tab {
				background-color: $uni-bg-color;
			}
		}
		.view-tab-group {
			padding: 20rpx 24rpx 0;
			.view-tab-item {
				display: inline-block;
				width: 342rpx;
				margin: 0 18rpx 28rpx 0;
				overflow: hidden;
				vertical-align: top;
				background-color: $uni-bg-color;
				&:nth-of-type(2n){
					margin-right: 0;
				}
				.hd {
					width: 342rpx;
					height: 342rpx;
					border-radius: 10rpx;
				}
				.bd {
					margin-top: 12rpx;
					.title {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						line-height: 44rpx;
						height: 82rpx;
						@extend .ellipses;
					}
					.info {
						@extend .justifyspacec;
						color: $uni-text-color-grey;
						margin-top: 12rpx;
						font-size: $uni-font-size-mini;
						font-family: Arial, Helvetica, sans-serif;
						height: 44rpx;
						.price {
							.jg {
								color: #ff4a50;
								.num {
									font-size: 36rpx;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
	}

::v-deep .st-customize-footer {
	background-color: #fff;
}
</style>
